<template>
  <div class="upload-file flex-y-start">
    <el-upload
      :multiple="false"
      :show-file-list="false"
      :on-success="handleImageSuccess"
      :http-request="uploadImage"
      :before-upload="beforeUpload"
      class="image-uploader"
      drag
      action="string"
    >
      <img v-if="imgUrl" :src="imgUrl" class="avatar" />
      <div v-else>
        <i class="el-icon-plus" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </div>
    </el-upload>
    <div class="tip" v-if="tip">{{ tip }}</div>

    <div class="block">
      <div class="demonstration">有效期</div>
      <el-date-picker
	  style="width: 200px;"
	  size="mini"
        v-model="value1"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script>
const allowType = ["image/png", "image/jpg", "image/jpeg"];

export default {
  props: {
    tip: {
      type: String,
      default: "",
    },
    value: {},

  },
  data() {
    return {
      imgUrl: "",
	  value1:"",
    };
  },
  watch: {
    value: {
      handler: function (val) {
        if (typeof val === "string" && val.startsWith("http")) {
          this.imgUrl = val;
        }
      },
      immediate: true,
    },
  },
  methods: {
    handleImageSuccess() {},
    uploadImage(file) {
      let fr = new FileReader();
      fr.onload = () => {
        this.imgUrl = fr.result;
      };
      fr.readAsDataURL(file.file);
      this.$emit("update:value", file.file);
    },
    beforeUpload(file) {
      const isImg = allowType.includes(file.type);
      if (!isImg) {
        this.$layer.msg("只能传入图片");
        return false;
      }

      return isImg;
    },
  },
};
</script>

<style lang="scss" scoped>
.image-uploader {
  width: 194px;
  border-radius: 4px;
  margin-right: 30px;
  .el-icon-plus {
    font-size: 40px;
    color: #e0e0e0;
  }
  >>> .el-upload-dragger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 194px;
    height: 232px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
  }
  >>> .el-upload-dragger:hover {
    border: 1px solid #c0c4cc;
  }
  .avatar {
    width: 194px;
    height: 232px;
    object-fit: contain;
  }
}
.tip {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  margin-right: 30px;
}
</style>